import React, { useEffect, useState } from 'react'
import { useLocation } from 'react-router-dom'
import { Breadcrumb } from 'antd'
import { HomeOutlined } from '@ant-design/icons'

const navDir = new Map([
  ['edit', '文章编辑'],
  ['list', '文章列表'],
  ['means', '修改资料'],
  ['test', 'Test'],
  ['sanji', '三级下拉'],
  ['test2', 'test2'],
  ['test1', 'test1']
])

export default function Bread() {
  const { pathname } = useLocation()
  const [breadCrumbList, setBreadCrumbList] = useState([])
  useEffect(() => {
    let validPathArr = pathname.split('/').filter(v => v)
    setBreadCrumbList(validPathArr)
  }, [pathname])

  return (
    <div>
      <Breadcrumb style={{ height: '30px', lineHeight: '30px' }}>
        <Breadcrumb.Item href="/list">
          <HomeOutlined />
        </Breadcrumb.Item>
        {breadCrumbList.map((item, index) => {
          return <Breadcrumb.Item key={index}>{navDir.get(item)}</Breadcrumb.Item>
        })}
      </Breadcrumb>
    </div>
  )
}
